<template>
    <div class="ejectP">
           <u-navbar :is-back="true" title="设备报修" :custom-back="BackM" back-text='' >
      <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<!-- <div>
                <image @click="goSettingM" style="width: 1rem;padding: 1rem;" src="../../style/image/my/设 置.png" alt="">
                </div> -->
			</view>
      </u-navbar>

      <div class="selectPositionC">
            <div style="
font-size: 0.89rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin:0.5rem;" >设备SN码</div>

            <div class="euqiptmentListP" >
            <div class="euqiptmentList" v-for="(item,index) in euqiptmentLists "  :key="index" @click="selectM(item)" >
                     <div class="euqiptmentList-child" 
                     :style="{ 
                     color:selectId==index?'white':'black' 
                     ,backgroundColor:selectId==index?'#02af74':'white'
                     ,border:selectId==index?'1px solid #02af74':'1px solid #9b9b9b;' }" >
                        <div style="font-size: 0.8rem;" >{{item.value}}</div>
                     </div>
            </div>
            </div>
      
      </div>
<!-- 
                  <div style="
font-size: 0.89rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin:0.5rem;" >详细内容</div> -->

       <div class="contentDetailed">
       
       
        <u-field
         type="textarea"
			v-model="mobile"
			label="详细内容"
			placeholder="请输入故障详细内容"
		/>

       </div>

                         <div style="
font-size: 0.89rem;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin:0.5rem;" >照片<span style="
font-size: 0.89rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
margin:0.5rem;" >(请输入故障详细内容)</span></div>

<u-upload  style="" :action="action"  on-change='imageChange' :file-list="fileList" ></u-upload>



          <div class="footP" >
            <div  @click="addPosM" style="padding: 0.7rem;
display: flex;align-items: center;" >
                <!-- <image style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
                <div  style="color: white;
margin-left: 0.2rem;">提交</div>
            </div>

    </div>



    </div>

</template>

<script lang='ts' >

 import { Component, Prop,Vue, Watch ,Emit} from 'vue-property-decorator'


 @Component({     //   @Component  是一个装修器   不可以在下面写语句
        name: 'test',
    })


    export default class extends Vue {
 
     @Prop({
            type: String, // 父组件传递给子组件的数据类型
            required: false, // 是否必填
            default: ' ' // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
        }) msg!:string;


         public mobile=''
         public action=''
         public fileList=[]

         public selectId=999
         public euqiptmentLists=[
              {
                status:true,
                value:'123123',
                id:1
                },
                {
                status:true,
                value:'123123',
                id:2
                },
                // {
                // status:true,
                //   value:'123123',
                // id:3
                // },
                // {
                // status:true,
                // value:'123123',
                // id:4
                // },{
                // status:true,
                // value:'123123',
                // id:5
                // },{
                // status:true,
                // value:'123123',
                // id:6
                // }
          ]
       
         created() {
          }

          mounted() {
              //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑

                
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
          }

          selectM(data:any){

                console.log(data.id)

                this.selectId=data.id-1

          }

            BackM() {

      uni.navigateTo({
      url: "../sHome/index",
    });
            }

          goejectNextM(){
          
            console.log('123')
          }
          imageChange(res:any, index:any, lists:any, name:any){
            console.log(res, index, lists, name)

          }

    }
</script>

<style  lang="scss"  scoped>


>>>.u-list-item {
 width: 110px;
 height: 110px;
 background-color: white;
}


.ejectP{
   background-color: #f4f5f7;
height: 100vh;
}

.footP{

position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.euqiptmentListP{

 display: flex;
 flex-wrap: wrap;
}

.euqiptmentList{

width: 33.3%;
text-align: center;
}
.euqiptmentList-child{
padding: 0.6rem 1rem;
margin: 0.5rem;
border: 1px solid  #9b9b9b;
border-radius: 0.2rem;
}


.contentDetailed{

margin: 1rem;
background-color: white;
border-radius: 0.4rem;
padding: 0.5rem 1rem;
}

</style>